<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>08css위치표시여부</title>
		
	</head>

	<body>
		<h1>CSS위치표시여부</h1>
		<h2>CSS 위치 지정 : position</h2>
		<p>html 요소를 어떻게 배치할지를 정의</p>
		<p>위치지정은 position, top, left 속성을 이용</p>
		<p>static : 문서 내용의 흐름에 따라 배치 (위-아래)</p>
		<div style="width: 250px; height: 150px;
					background: red; position: static; top: 300px; left: 300px;">
			static
		</div>
		<p>absolute : 조상요소(body)를 기준으로 배치 (위-아래)</p>
		<div style="width: 250px; height: 150px;
					background: yellow; position: absolute; top: 150px; left: 350px;">
			absolute
		</div>
		
		<hr />
		<p>relative : 현재 위치에서 지정한 위치로 이동</p>
		<div style="width: 250px; height: 150px;
					background: green; position: relative; top: 150px; left: 300px;">
			relative
		</div>
		<div style="width: 250px; height: 150px;
					background: green; position: relative; top: 0; left: 0;">
			relative
		</div>
				
		<hr />
		<p>fixed : 지정한 위치에서 고정함 (absolute+고정)</p>
		<div style="width: 250px; height: 150px;
					background: cyan; position: fixed; top: 300px; left: 450px;">
			fixed
		</div>
		
		<hr/>
		<h2>요소 겹치기 : z-index</h2>
		<p>absolute, relative, fixed에서만 요소를 겹칠 수 있음</p>
		<div style="width: 250px; height: 150px;
					background: #00fbcc; position: relative; top: 0; left: 0;">
			#1
		</div><div style="width: 250px; height: 150px;
					background: #ee0dee; position: relative; top: -50px; left: 50px; z-index: 10">
			#2
		</div><div style="width: 250px; height: 150px;
					background: #fbff84; position: relative; top: -100px; left: 150px;">
			#3
		</div>
		
		<hr />
		<h2>요소 표시하기 : display, visibility</h2>
		<p>display : none/block,inline - 요소가 차지한 영역도 제거</p>
		<p>visibility : hidden/visible - 요소가 차지한 영역은 남음</p>
		<div style="width: 100px; height: 150px;
					background: #00fff0; border: 2px solid black;
					float: left; display: none;">
			display : remove	
		</div>

		<div style="width: 100px; height: 150px;
					background: #066ff0; border: 2px solid black;
					float: left; visibility: hidden;">
			visibility : hide	
		</div>
		
		<div style="width: 100px; height: 150px;
					background: #f66744; border: 2px solid black;
					float: left;">
			고정
		</div>
		
		<hr  style="clear: both;" />
		<h2>display 속성 : 박스모델의 종류를 정의</h2>
		<p>block : 현재 요소를 블럭 요소로 보이게 함</p>
		<p>inline : 현재 요소를 인라인 요소로 보이게 함</p>
		<p>inline-block : 현재 요소는 인라인 요소로 보이게 하되 블록 요소의 특성을 사용할 수 있게 함</p>
		
		<h3>display 적용하지 않음</h3>
		<p>니뇨<span style="background: orange;">니니냐뇨</span>니나뇨니</p>
		<div>니뇨<p style="background: gray;">니니냐뇨</p>니나뇨니</div>
		<div>니뇨<p style="background: #8732ff;">니니냐뇨</p>니나뇨니</div>
		<hr />
		<h3>display 적용</h3>
		<p>니뇨<span style="background: orange; display: block;">니니냐뇨</span>니나뇨니</p>
		<div>니뇨<p style="background: gray; display: inline;">니니냐뇨</p>니나뇨니</div>
		<span>adsf
		<div style="background: #8732ff; display: inline-block;">니뇨<p>니니냐뇨</p>니나뇨니</div>
		</span>
	</body>
</html>
